﻿@{
    ViewBag.Title = "课程学习";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/assets/css/bootstrap.css" rel="stylesheet" />
<link href="~/assets/css/main.css" rel="stylesheet" />
<link href="~/assets/css/common.css" rel="stylesheet" />
<link href="~/assets/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-3.1.0.js"></script>
<script src="~/assets/jquery-sortable/jquery-sortable.js"></script>

<script src="~/assets/bootstrap-notify/bootstrap-notify.js"></script>
<link href="~/assets/videojs/video-js.css" rel="stylesheet" />

 
<script src="~/assets/videojs/video.js"></script>
<script src="~/assets/videojs/zh-CN.js"></script>
<script>
    //video.js在浏览器不支持video标签时设置falsh播放器路径
    videojs.options.flash.swf = "@Url.Content("~/assets/videojs/video-js.swf")";
</script>



<div class="col-md-4">
    <div class="panel panel-default panel-col lesson-manage-panel" data-file-status-url="/course/12/manage/lesson/fileStatus" data-widget-cid="widget-1">
        <input id="courseId" type="hidden" value="@ViewBag.CourseId" />
        <input id="HourId" type="hidden" value="" />
        <div class="panel-heading" style="position: relative; top: auto; bottom: auto; left: auto; width: auto;">
            @ViewBag.CourseName
        </div>

        <div class="panel-body">
            <ul class="lesson-list sortable-list js-period-list" id="course-item-list" data-sort-url="/Admin/NodeSort">
                @foreach (LeEdu.DTO.Node item in ViewBag.Hours)
                {
                    switch (item.Type)
                    {
                        case LeEdu.DTO.NodeType.Chapter:
                            <li class="item-chapter js-chapter  clearfix" id="chapter-@item.Id">
                                <div class="item-content">
                                    第 <span class="number">1</span> 章：
                                    @item.Name
                                </div>
                                
                            </li>
                            break;
                        case LeEdu.DTO.NodeType.Section:
                        <li class="item-chapter  item-chapter-unit clearfix" id="section-@item.Id" style="word-break: break-all;">
                            <div class="item-content">
                                第 <span class="number">1</span> 节：
                                @item.Name
                            </div>
                            
                        </li>

                            break;
                        case LeEdu.DTO.NodeType.Hour:
                        
                        <li class="item-lesson clearfix" id="lesson-@item.Id" data-file-id="0" data-lesson-type="text">
                            <div class="item-line"></div>
                            <a href="#" id="VideoStart" data-HourId="@item.Id">
                                <div class="item-content">
                                    <i class="fa fa-file-photo-o text-success"></i>
                                    课时 <span class="number">1</span>：
                                    @item.Name
                                    <span class="glyphicon-play" data-role="mediaStatus"></span>
                                </div>
                            </a>

                            
                        </li>
                            break;
                        default:
                            break;
                    }
                }
            </ul>
        </div>
    </div>
</div>


<div id="VideosDIV" class="col-md-6">
    
    <video id="video_player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1000" height="710"
           poster="@Url.Content("~/Uploads/Courses/CoursesImg/00ae7a1b-e561-4db3-81d9-914cd9a2953e/u=2859356256,2074368524&fm=21&gp=0.jpg")"
           data-setup="{}">
        @*<source id="VideoPath" src="@Url.Content("~/Uploads/movie.mp4")" type='video/mp4' />*@         
        <p class="vjs-no-js">
            当前视频不能播放，可能因为以下原因：<br />
            1.浏览器禁止执行JavaScript，请开启。<br />
            2.浏览器不支持Html5中的video标签，请升级浏览器。
        </p>
    </video>

</div>

<script>




    $(function () {
        $(".item-lesson a").click(function () {
            var h_id = $("#VideoStart").attr("data-HourId");
            $.ajax({
                url: '@Url.Action("StartVideo", "Home")',
                type: "post",
                data: { hid: h_id },
                success: function (data) {

                    //videojs("video_player").pause();
                    videojs("video_player").src(data);
                    //document.getElementById("VideoPath").src = data;
                    //$("#VideoPath").removeAttr(src);
                    //$("#VideoPath").attr(src, data);
                    //videojs("video_player").load(data);
                    videojs("video_player").play();
                },
            });


        })

        //章节目录的排序

        var $list = $("#course-item-list").sortable({
            distance: 20,
            itemSelector: '.item-lesson, .item-chapter',
            onDrop: function (item, container, _super) {
                _super(item, container);
                sortList($list);
            },
            serialize: function (parent, children, isContainer) {
                return isContainer ? children : parent.attr('id');
            },
            isValidTarget: function (item, container) {
                if (item.siblings('li').length) {
                    return true;
                } else {
                    return false;
                }
            }
        });

        sort($list);

        var sortList = function ($list) {
            var data = $list.sortable("serialize").get();
            $.post($list.data('sortUrl'), { ids: data }, function (response) {
                sort($list);
            });
        };
    })

</script>

